組件實作 : Demo

一、前言

今天要來研究一下 Flexbox 的寫法，它是一個用來排版的神器，可以很有效的處理元素水平與垂直置中對齊，本篇主要是參考這篇文章，建議可以把文章先收藏起來，要用的時候可以查閱。

二、直接實作 Flexbox 組件

HTML：

<div class="flexbox">
	<div class="header">Flexbox</div>
	<div class="container">
		<div class="cards">
			<h3>display</h3>
			<p>display:<span>flex</span>;</p>
			<div class="demo-display outbox">
				<p class="innerbox">1</p>
				<p class="innerbox innerbox__2times">2</p>
				<p class="innerbox">3</p>
			</div>
		</div>
		...
	</div>
</div>

顯示結果：

CSS：（起手式）

* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "微軟正黑體";
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
	background-color: #7b4a91;
}

body {
	width: 100%;
	height: 100%;
	background-color: #eee;
	display: flex;
	align-items: center;
	overflow-x: hidden;
}

CSS：

.flexbox {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

.header {
	line-height: 50px;
	height: 50px;
	text-align: center;
	background: #333;
	color: wheat;
	margin: 0;
	font-size: 30px;
	letter-spacing: 5px;
}

.container {
	width: 100%;
	padding: 20px;
	font-weight: 600;
}

顯示結果：

.cards {
	width: 100%;
	margin-bottom: 15px;
	border: solid 1px rgba(0, 0, 0, 0.15);
	padding: 15px 20px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: rgba(238, 238, 238, 0.6);
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(to bottom, #ecd6f0 70%, #fff 100%);
}

顯示結果：

.innerbox {
	background: #f7941f;
	margin: 10px;
	height: 40px;
	border: 2px solid black;
	box-shadow: 1px 1px 0 1 #f7941f;
	border-radius: 3px;
	box-shadow: 10px 10px #f9af56 inset, 5px 5px #824f9a;
	flex-grow: 1;
	font-size: 24px;
	color: white;
	text-align: center;
	line-height: 40px;
	flex-shrink: 0;
	min-width: 40px;
}

顯示結果：

.outbox {
	width: auto;
	border-radius: 3px;
	border: 1px solid black;
	background: #995db5;
	box-shadow: 10px 10px #7b4a91 inset;
	margin: 10px 0;
}

顯示結果：

CSS：

.demo-display {
	display: flex;
	justify-content: space-around;
}

顯示結果：

CSS：

.innerbox__2times {
	flex-grow: 2;
}

顯示結果：

CSS：

p {
	background: #1b1b1b;
	border-radius: 5px;
	color: #72e0d1;
	padding: 5px;
}
span {
	color: #f5d67b;
}

顯示結果：

三、 Flexbox 的各種功能

Coming Soon。

四、推薦資源

1. 暫時無推薦資源

五、結論

本來想說要一起直接講解grid的用法，但是後來發現其實grid再獨立出來寫一篇會比較好，個人認為Flexbox用在置中對齊上很方便，寫法上也不用像是float一樣，需要clear掉一些東西。至於grid的用法，它可以排出一些「方正」的矩形，可以用在像是電商的商品清單、追劇時的影片列表等等。每一種排版方式都有各自的特性，如何選擇該用哪一種方式排版呢？個人認為，只要熟悉各種排版的用法，了解每個語法的特性，以及差異點，久而久之應該就能掌握到技巧。那麼，今天的內容到這邊結束啦～我們明天見！

花了很多時間在解決排版的問題，其實 Flexbox 是在幾個星期前寫的程式，今天重新檢視了一遍，卻有種不知道自己在寫什麼的窘境，這應該代表著「寫程式功力有所成長了（吧？）」，雖然修改起來還蠻辛苦的，但是有一種向前邁進的感覺，希望可以變得越來越好！

六、參考資料

1. A Complete Guide to Flexbox